<template>
  <div style="display: flex;height: 100vh;">
    <button @click="visibale=!visibale">切换</button>
    <Child1 style="flex: 1;background-color: springgreen;"></Child1>
    <Child2 style="flex: 1;background-color: tomato" v-if="visibale"></Child2>
  </div>
</template>
<!-- 
    使用mitt依赖包来实现事件总线的通信的步骤
    1、安装mitt
    2、创建bus.ts文件
    import mitt from 'mitt'
    const bus=mitt()
    export default bus
    3、发送
    bus.emit(key,msg)
    4、接收
    bus.on(key,(msg)=>{
        
    })
    5、解绑
    bus.off(key)
 -->
<script lang='ts' setup>
import Child1 from '@/views/Child1.vue'
import Child2 from '@/views/Child2.vue'
import {ref} from 'vue'
const visibale=ref<boolean>(true)
</script>

<style lang='scss' scoped>
</style>